<template>
  <div>
    <h1>API调用示例</h1>
    <button @click="getData">GET请求</button>
    <button @click="postData">POST请求</button>
    <button @click="putData">PUT请求</button>
    <button @click="deleteData">DELETE请求</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import request from '@/utils/request';

export default defineComponent({
  methods: {
    async getData() {
      try {
        const response = await request.get('/api/data');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
    async postData() {
      try {
        const response = await request.post('/api/data', { data: 'example' });
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
    async putData() {
      try {
        const response = await request.put('/api/data/1', { data: 'example' });
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
    async deleteData() {
      try {
        const response = await request.delete('/api/data/1');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
  }
});
</script>